<html>
<head>
    <meta charset="UTF-8">
    <title>我的朋友圈</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="js/sockjs.js"></script>
    <script src="js/stomp.js"></script>
    <script src="js/jquery.min.js"></script>   
    <script type="text/javascript">
        var stompClient = null;
        var target = "TO_ALL";
        var _token = window.localStorage.getItem('token');
        var _id = window.localStorage.getItem('userid');
        var _nickName = JSON.parse(window.localStorage.getItem('myinfo')).nickName;
        //var _token = "DB663F3565DDF495F9F0DDB67CEBA9C3";
        //var _id = "a247395c28e2eefc10f0f2fa801b321466a3f53e";
        var default_headpic_group = ["http://markerfile.oss-cn-beijing.aliyuncs.com/fileupload/USER_000003/headpic/99cd1f1adf7448f3c119e4340a4e5985.jpg?Expires=1856767989&OSSAccessKeyId=LTAIj5tGvvr8G5YH&Signature=xnzWG3nQRU5f%2FhXnQygyfce7oWM%3D","http://markerfile.oss-cn-beijing.aliyuncs.com/fileupload/USER_000051/headpic/0551b5bffa75498a89d882136eeb54bf.jpg?Expires=1856764601&OSSAccessKeyId=LTAIj5tGvvr8G5YH&Signature=8%2FOLZk6WB%2B3JiBeYzWU8%2FYFkmp8%3D","http://markerfile.oss-cn-beijing.aliyuncs.com/fileupload/USER_000063/headpic/0551b5bffa75498a89d882136eeb54bf.jpg?Expires=1856781655&OSSAccessKeyId=LTAIj5tGvvr8G5YH&Signature=CEFVmTsMAbNHsvQBGcozHl5%2BBu8%3D"]
	    function connect() {
	    	var conn = window.sessionStorage.getItem('conn');
	    	if(!conn) {
		        var socket = new SockJS('http://localhost:8088/app/any-socket');
		        stompClient = Stomp.over(socket);
		        stompClient.connect({userid:_id,token:_token}, function (frame) {
		            // 订阅 /topic/notice 实现群聊
		            window.sessionStorage.setItem('conn',true);
		            stompClient.subscribe('/topic/notice', function (message) {
		            	var content = message.body;
		            	var text = content.split("sp;");
		            	var info = {
		            		avator: default_headpic_group[1],
		            		context: text[1],
		            		nickName: text[0]
		            	}
		                showMessage(info);
		            },{userid:_id,token:_token});
		            // 订阅 /user/topic/chat 实现点对点聊
		            var username = window.localStorage.getItem('username');
		            if(!username) {
		            	username = 'guest';
		            }
		            stompClient.subscribe('/user/queue/chat', function (message) {
		                showMessage(JSON.parse(message.body));
		            },{userid:_id,token:_token});
		        });
		    } 
	    }

	    function showMessage(message) {
	   		var htmlBuilder = "<div class=\"talk-show-box\">"+
	   		"<div class=\"talk-line\">"+
	   		"<div class=\"avator\">"+
	   		"<img src=\""+message.avator+"\" alt=\""+message.avator+"\"/>"+
	   		"</div>"+
	   		"<div class=\"nickName\">"+message.nickName+"</div>"+
	   		"<div class=\"context\">"+
	   		"<div class=\"message\">"+message.context+"</div>"+
	   		"<div class=\"date\"></div>"+
	   		"</div>"+
	   		"</div>";
	        $(".aui-scrollView").append(htmlBuilder);
	    }

	    $(function () {
	        // 建立websocket连接
	        //connect();
	        // 发送消息按钮事件
	        $("#send").click(function () {
	            if (target == "USER"){
	                // 群发消息
	                // 匹配后端ChatController中的 @MessageMapping("/notice")
	                var context = $("#name").val();
	                stompClient.send("/app/notice", {}, context);
	            } else{
	                // 点对点消息，消息中必须包含对方的username
	                // 匹配后端ChatController中的 @MessageMapping("/chat")
	                var context = $("#name").val();
	                //var content = "{'content':"+context+",'receiver':'anoy'}";
	                var content = context;
	                stompClient.send("/app/chat", {'token':_token}, _nickName+"sp;"+content);
	            }
	        });

	        $(".btn-send").click(function(){
	        	send();
	        });

	    });

	    function send() {
	    	var talk = $(".talk-box").html();
	    	var message = {
	    		toUser: _id,
	    		context: talk
	    	}
	    	stompClient.send("/topic/notice", {'userid':_id,'token':_token}, _nickName+"sp;"+talk);
	    	//showMessage(message);
	    }

    </script>
</head>
<body>
<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being enabled. Please enable
    Javascript and reload this page!</h2></noscript>
<section class="aui-flexView">
	<header class="aui-navBar aui-navBar-fixed">
		<a href="javascript:;" class="aui-navBar-item">
			<i class="icon icon-return"></i>
		</a>
		<div class="aui-center">
			<span class="aui-center-title">通讯录</span>
		</div>
		<a href="javascript:;" class="aui-navBar-item">
			<i class="icon icon-group"></i>
		</a>
	</header>
	<section class="aui-scrollView" style="padding-left: 5px;">
	   
	</section>
	<footer class="aui-footer aui-footer-fixed">
		<div class="footer-top">
	    	<div class="talk-box" contenteditable="true"></div>
	    	<div class="btn-send">发送</div>
	    </div>
		<a href="../home/" class="aui-tabBar-item">
                    <span class="aui-tabBar-item-icon">
                        <i class="icon icon-loan"></i>
                    </span>
			<span class="aui-tabBar-item-text">首页</span>
		</a>
		<a href="javascript:;" class="aui-tabBar-item aui-tabBar-item-active">
                    <span class="aui-tabBar-item-icon">
                        <i class="icon icon-credit"></i>
                    </span>
			<span class="aui-tabBar-item-text">消息</span>
		</a>
		<a href="javascript:;" class="aui-tabBar-item ">
                    <span class="aui-tabBar-item-icon">
                        <i class="icon icon-ions"></i>
                    </span>
			<span class="aui-tabBar-item-text">资讯</span>
		</a>

		<a href="../content/personal/" class="aui-tabBar-item ">
                    <span class="aui-tabBar-item-icon">
                        <i class="icon icon-meTo"></i>
                    </span>
			<span class="aui-tabBar-item-text">我的</span>
		</a>
	</footer>
</section>

</body>
</html>